<template>
  <div class="tag-main">
    <el-tabs
      v-model="activeTable"
      type="card"
      @tab-remove="removeTab"
      @tab-change="changeHandle"
      @tab-click="clickHandle"
      style="max-width: 1138px; flex: 1"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.path !== '/home'"
      ></el-tab-pane>
    </el-tabs>
    <el-dropdown class="el-dropdown" @command="dropdownHandle">
      <span class="el-dropdown-link">
        <el-icon>
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
          <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRoute,useRouter, onBeforeRouteUpdate } from "vue-router";

// 监听当前路由发生的变化
onBeforeRouteUpdate((to, from) => {
  console.log(to,'to');
  activeTable.value = to.path;
  addTab({
    title: to.meta.title,
    path: to.path,
  });
  // 将新路由设置为激活项
});
// 新增导航标签
const addTab = (obj) => {
  const isTab = tabList.value.findIndex((item) => item.path == obj.path) == -1;
  if (isTab) {
    tabList.value.push(obj);
  }
  // 本地存储
  window.sessionStorage.setItem("tabList", JSON.stringify(tabList.value));
};
const route = useRoute();
const router = useRouter()
const activeTable = ref(route.path);
// tab数据源
const tabList = ref([
  {
    title: "后台首页",
    path: "/home",
  }
]);
// tab点击事件
const clickHandle = (pane) => {
  console.log(pane,"pane");
}
// 移除tab事件
const removeTab = (path) => {
  console.log(path, "path");
  // 判断关闭的标签是否是激活的状态。如果是激活状态，则需要切换路由
  // 获取当前激活的tab标签
  let isTabs = activeTable.value;
  // 获取菜单数据源
  const tabs = tabList.value;
  // 删除的是激活状态菜单，需要将激活选项设置为上一个或者下一个标签
  if (path == isTabs) {
    tabs.forEach((item, index) => {
      if (item.path == path) {
        // 找到需要删除的菜单
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          isTabs = nextTab.path;
        }
      }
    });
  }
  activeTable.value = isTabs;
  // 从tabList数组删除选中的菜单
  tabList.value = tabList.value.filter((item) => item.path != path);
  // 重新设定本地存储
  window.sessionStorage.setItem("tabList", JSON.stringify(tabList.value));
};

// tab改变事件
const changeHandle = (path) => {
  activeTable.value = path;
  router.push({path:path})
};
// 初始化标签导航列表
const initTabList = () => {
  let istablist = JSON.parse(window.sessionStorage.getItem("tabList"));
  if (istablist) {
    tabList.value = istablist;
  }
};
initTabList();
// 关闭其他/关闭所有
const dropdownHandle = (res) => {
    console.log(res,"res");
    if(res == 'closeOther') {
        // 关闭其他  只保留首页和当前激活项状态
        tabList.value = tabList.value.filter(item => item.path == '/home' || item.path == activeTable.value)
    }
    if(res == 'closeAll') {
        // 将标签切换为首页
        activeTable.value = '/home'
        // 数据源只保留首页
        tabList.value = [
            {
                title:'后台首页',
                path:'/home'
            }
        ]
    }
    window.sessionStorage.setItem('tabList',tabList.value)

}
</script>

<style lang="less" scoped>
.tag-main {
  display: flex;
  background: #f4f1f1;
  overflow: hidden;
  padding-top: 7px;
  padding-bottom: 7px;
  align-items: center;
}
.el-dropdown {
  background: #fff;
  width: 30px;
  height: 34px;
  border-radius: 4px;
  margin-left: auto;
  display: flex;
  margin-right: 10px;
  justify-content: center;
  align-items: center;
}
:deep(.el-tabs__header) {
  margin: 0;
  border: 0 !important;
}
:deep(.el-tabs__nav) {
  border: 0 !important;
}
:deep(.el-tabs__item) {
  border: 0 !important;
  background-color: #fff;
  margin-left: 10px;
  height: 34px;
  line-height: 34px !important;
  border-radius: 4px;
}

</style>
